<template>
    <div class="main">
        <div class="box">
            <form action="#" method="post" enctype="multipart/form-data">
                <div id="file-buttton-replace" @click="upload()">
                    <svg-icon icon-class="upload" style="font-size: 17px;"/>&nbsp;
                    <span>选择文件</span>
                </div>
                <input type="file" name="fileUpload" id="file-buttton"/>
                <span class="btn gen" @click="genSrcript()">
                    <svg-icon icon-class="code" style="font-size: 17px;"/>&nbsp;
                    <span>生成SQL脚本</span>
                </span>&nbsp;&nbsp;
                <span class="btn download" @click="genSrcriptFile()">
                    <svg-icon icon-class="download" style="font-size: 17px;"/>&nbsp;
                    <span>下载SQL文件</span>
                </span>
            </form>
        </div>
        <hu-dialog title="SQL" top="15%" ref="sqlDataDialogOpen" width="80vw" submit="确认" @hu-dialog="sqlDataDialog">
            <div style="height: 60vh;margin-bottom: 7px;">
                <hu-editor v-model="sqlData" :mode="editorMode" autoFormat></hu-editor>
            </div>
        </hu-dialog>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { analysisFile, analysisFileAndDownload } from '@/api/extend/analysis'
import { isEmpty } from '@/utils/validate'
let fileInfo = null
export default {
    name: '解析文件表',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            sqlData: null,
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        fileInfo = null
    },
    watch: {
        
    },
    methods: {
        upload(){
            this.$huConfirm({
                title: "提示",
                content: `目前仅支持 .xls、.xlsx、.csv、.txt 类型文件`,
                confirmText: '选择文件',
                cancelText: '取消',
                onConfirm: () => {
                    const file = document.getElementById("file-buttton")
                    file.click()
                    file.addEventListener('change', function (e){
                        fileInfo = e.target.files[0]
                        document.getElementById("file-buttton-replace").innerHTML = fileInfo.name
                        // document.getElementById("file-buttton-tips").innerHTML = fileInfo.name
                    })
                }
            })
        },
        genSrcript() {
            if(fileInfo == null) {
                this.$huTip({ type: 'warning', value: '抱歉，您未选择文件' })
                return
            }
            this.$huConfirm({
                title: "确认",
                content: `该操作将获取[${fileInfo.name}]的导入脚本？`,
                confirmText: '获取脚本',
                cancelText: '取消',
                onConfirm: () => {
                    this.$huTip({ type: 'info', value: '脚本生成中...' })
                    let formData = new FormData()
                    formData.append('file', fileInfo)
                    analysisFile(formData).then((res) => {
                        this.sqlData = res.data.data
                        this.$refs.sqlDataDialogOpen.openDialog()   
                    }).catch((error) => {
                        this.$huTip({ type: 'error', value: error })
                    })
                }
            })
        },
        genSrcriptFile() {
            if(fileInfo == null) {
                this.$huTip({ type: 'warning', value: '抱歉，您未选择文件' })
                return
            }
            this.$huConfirm({
                title: "确认",
                content: `该操作将下载脚本文件？`,
                confirmText: '下载',
                cancelText: '取消',
                onConfirm: () => {
                    this.$huTip({ type: 'info', value: '脚本生成中...' })
                    let formData = new FormData()
                    formData.append('file', fileInfo)
                    analysisFileAndDownload(formData).then((res) => {
                        // if(isEmpty(res.data)) {
                        //     this.$huTip({ type: 'success', value: '没有生成任何脚本内容' })
                        //     return
                        // }
                        const blob = new Blob([res.data])
                        let fileName
                        if(fileInfo === null || fileInfo.name === '') {
                            fileName = `解析文件表_${Date.now()}.sql`
                        } else {
                            fileName = `${(fileInfo.name).split('.')[0]}.sql`
                        }
                        if ('download' in document.createElement('a')) {
                            //支持a标签download的浏览器
                            const link = document.createElement('a');//创建a标签
                            link.download = fileName;//a标签添加属性
                            link.style.display = 'none';
                            link.href = URL.createObjectURL(blob);
                            document.body.appendChild(link);
                            link.click();//执行下载
                            URL.revokeObjectURL(link.href); //释放内存
                            document.body.removeChild(link);//释放标签
                        } else {
                            navigator.msSaveBlob(blob, fileName);
                        }
                    }).catch((error) => {
                        this.$huTip({ type: 'error', value: error })
                    })
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.main{
    position: relative;
}
.box{
    width: 100%;
    height: 100px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background-color: brown;
}
.box input{
    margin: 20px;
}
.box form {
    // background-color: aquamarine;
    text-align: center;
}
#file-buttton{
    display: none;
}
#file-buttton-replace{
    cursor: pointer;
    user-select: none;
    width: 265px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    margin: 0 auto;
    background-color: #1f242e;
    color: #919191;
    border: 1px solid #2a2f39;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 15px;
    transition: 0.2s;
}
#file-buttton-replace:hover{
    background-color: #171d27;
}
.btn{
    cursor: pointer;
    user-select: none;
    color: #8f9297;
    border: 1px solid #2a2f39;
    display: inline-block;
    margin-top: 20px;
    border-radius: 1px;
    padding: 5px 8px;
    transition: 0.3s;
}
.gen{
    background-color: #1e2430;
}
.gen:hover{
    background-color: #171d27;
}
.download{
    background-color: #1e2430;
}
.download:hover{
    background-color: #171d27;
}
</style>